@import "variables";

#menu-json {
  display: none;
}

.menu-overlay {
  background-color: $color-gray-base;
  bottom: 0;
  left: 0;
  opacity: 0.8;
  position: fixed;
  right: 0;
  top: $header-full-height;
  z-index: 2;

  @media screen and (min-width: $breakpoint-lg) {
    display: none;
  }
}

.menu {
  background-color: #ffffff;
  border-right: solid 1px $color-gray-lighten-70;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  padding: 10px 0;
  position: fixed;
  top: $header-full-height;
  width: $menu-width;
  z-index: 2;

  @media screen and (min-width: $breakpoint-lg) {
    display: block;
    height: 100%;
    padding: 10px 0;
    position: static;
  }
}

#sidemenu {
  &.dn {
    display: none;
  }

  @media screen and (min-width: $breakpoint-lg) {
    bottom: 0;
    position: fixed;
    top: $header-full-height;
    z-index: 2;

    &.dn {
      display: block;
    }
  }
}

.menu a {
  font-weight: normal;
}

.menu li,
.menu ul {
  list-style-type: none;
  margin: 0;
}

.menu ul {
  display: none;

  &:first-child {
    padding-left: 0;
  }
}

.menu-label-wrapper {
  align-items: center;
  cursor: pointer;
  display: flex;
  padding: 5px 10px;

  .menu-label {
    color: $color-gray-lighten-20;
    cursor: pointer;
    display: block;
    line-height: $base-line-height;
    text-decoration: none;
    transition: 0.3s;
    width: 100%;

    &.active,
    &:hover {
      color: $color-blue-base;
    }

    &.active {
      font-weight: bolder;
    }
  }

  .icon {
    border-bottom: solid $menu-icon-size transparent;
    border-left: solid $menu-icon-size $color-gray-lighten-60;
    border-right: solid $menu-icon-size transparent;
    border-top: solid $menu-icon-size transparent;
    display: block;
    height: 0;
    margin-right: $menu-icon-size;
    transform-origin: 25% 50%;
    transition: $transition-time;
    width: 0;

    &.placeholder {
      border: none;
      width: $menu-icon-size * 2;
    }
  }
}

.menu-container {
  &.open > .menu-label-wrapper > .icon {
    transform: rotate(90deg);
  }
}

ul.expanded {
  display: block;
  padding-left: 16px;
}
